<!-- 可排序的固定表头表格 -->
<template>
  <div class="table-demo">
    <h2>5. 添加表头固定功能,可排序的固定表头表格</h2>
    <p class="description">使用 sortable 属性和列配置实现排序功能</p>
    
    <div class="table-container">
      <Table
        :data="sortedData"
        :columns="sortableColumns"
        fixed-header
        fixed-header-height="300px"
        sortable
        :sorted-column="sortedColumn"
        @update:sortedColumn="handleSortChange"
        border
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Table from '@/components/Table/Table.vue'

const customers = ref([
  { id: 1, name: '张三', age: 28, city: '北京', level: '黄金' },
  { id: 2, name: '李四', age: 35, city: '上海', level: '白银' },
  { id: 3, name: '王五', age: 42, city: '广州', level: '铂金' },
  { id: 4, name: '赵六', age: 31, city: '深圳', level: '黄金' },
  { id: 5, name: '钱七', age: 29, city: '杭州', level: '白银' }
])

const sortableColumns = ref([
  { title: '姓名', dataIndex: 'name', width: '120px', sortable: true },
  { title: '年龄', dataIndex: 'age', width: '80px', sortable: true },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '会员等级', dataIndex: 'level', width: '120px' }
])

const sortedColumn = ref({ field: null, order: null })

// 排序后的数据
const sortedData = computed(() => {
  const { field, order } = sortedColumn.value
  if (!field || !order) return customers.value

  return [...customers.value].sort((a, b) => {
    if (order === 'asc') {
      return a[field] > b[field] ? 1 : -1
    } else {
      return a[field] < b[field] ? 1 : -1
    }
  })
})

const handleSortChange = (column) => {
  sortedColumn.value = column
}
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #666;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  height: 400px;
}

:deep(.table-container) {
  height: 300px;
}

:deep(.body-container) {
  padding-top: 41px;  /* 为固定表头留出空间 */
}

:deep(.fixed-header-container) {
  background: white;
  z-index: 10;
}

/* 其他样式保持不变... */
</style>
